<template>
  <div>
    <el-form :inline="true">
      <!--总部管理员账号时显示-->
      <el-form-item v-if="roleType === '1'">
            <el-select v-model="searchDto.provinceCode" clearable placeholder="请选择省份"
                       @change="getSelectCity()">
              <el-option
                v-for="item in allSelectProvince"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
      </el-form-item>
      <!--总部管理员账号、办事处账号、省外包商时显示-->
      <el-form-item v-if="roleType === '1' || (roleType ==='2' && officeType === '0') || (roleType ==='3' &&
      outSource === '1')">
        <el-select v-model="searchDto.cityCode" clearable placeholder="请选择城市">
          <el-option
            v-for="item in allSelectCity"
            :key="item.code"
            :label="item.name"
            :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <!--<el-form-item>-->
        <!--<el-input placeholder="工单编号" v-model="searchDto.acceptedCode"></el-input>-->
      <!--</el-form-item>-->
      <el-form-item>
        <el-input placeholder="客户姓名" v-model="searchDto.customerName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchDto.factoryId" clearable placeholder="请选择工厂">
          <el-option
            v-for="item in factoryOption"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <!--<el-form-item>-->
      <!--<el-date-picker-->
      <!--v-model="searchDto.dateSearch"-->
      <!--placeholder="选择返还日期"-->
      <!--value-format="yyyy-MM-dd"-->
      <!--format="yyyy 年 MM 月 dd 日"-->
      <!--type="date"-->
      <!--:picker-options="pickOption"></el-date-picker>-->
      <!--</el-form-item>-->
      <el-form-item>
        <el-date-picker
          v-model="searchDto.acceptDate"
          placeholder="选择受理日期"
          value-format="yyyy-MM-dd"
          format="yyyy 年 MM 月 dd 日"
          type="date"
          :picker-options="pickOption"></el-date-picker>
      </el-form-item>
      <el-form-item v-if="roleType === '1' || roleType === '2'">
        <el-input placeholder="YSTSN" v-model="searchDto.ystsn"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchReturn()">查询</el-button>
      </el-form-item>
    </el-form>
    <!--tab栏-->
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="未返还" name="unReturn">
        <div class="toolbar-header" v-show="this.roleType === '2' || this.roleType === '3'">
          <el-button class="toolbar-btn" type="text" @click="onReturn()">返还</el-button>
        </div>
        <custom-table
          :multipleSelection="this.roleType === '2' || this.roleType === '3'"
          :data="returnOrderList"
          :columns="columns"
          :tableLoadingFlag="tableLoadingFlag"
          :pagination="pagination"
          :operationColumn="operationColumn"
          @selection-change="addList">
        </custom-table>
      </el-tab-pane>
      <el-tab-pane label="已返还" name="alreadyReturn">
        <custom-table
          :data="alreadyReturnList"
          :columns="column2"
          :tableLoadingFlag="tableLoadingFlag"
          :operationColumn="operationColumn"
          :pagination="paginationAlready">
        </custom-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="维修记录" :visible.sync="detailDialogVisible" :close-on-click-modal="false">
      <repair-list
        :ystsn="ystsn">
      </repair-list>
      <div slot="footer">
        <el-button type="primary" @click="onBtnCancel()">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {apiGetReturnList} from '@/api/repairs/point/accept'
  import {parseTime} from '@/utils'
  import CustomTable from '../../../components/table/CustomTable.vue'
  import {apiGetFactoryList, apiGetCity} from '@/api/dictionary'
  import RepairList from '../../../components/table/RepairList.vue'
  import {
    getRoleType,
    getOfficeProvinceCode,
    getOutsourceProvinceCode,
    getOfficeType,
    getOutsourceType
  } from '@/utils/token'

  export default {
    components: {
      CustomTable,
      RepairList
    },
    name: 'return',
    created () {
      // 初始化省份
      this.getSelectProvince()
      let listQuery = {
        pageNumber: this.pagination.currentPage,
        pageSize: this.pagination.pageSize
      }
      // 登录用户是省级办事处时，初始化地市
      if (this.roleType === '2' && this.officeType === '0') {
        this.searchDto.provinceCode = getOfficeProvinceCode()
        this.getSelectCity()
      } else if (this.roleType === '3' && getOutsourceType() === '1') {
        this.searchDto.provinceCode = getOutsourceProvinceCode()
        this.getSelectCity()
      }
      // 显示加载工厂一览
      this.getFactoryList()
      this.disabledFlag = true
      this.getReturnList(listQuery)
      this.roleType = getRoleType()
      if (this.roleType === '2' || this.roleType === '3') {
        this.disabledFlag = false
      } else {
        this.disabledFlag = true
      }
    },
    data () {
      return {
        pickOption: {
          disabledDate (time) {
            return time.getTime() > Date.now()
          }
        },
        searchDto: {
          customerName: '',
          // acceptedCode: '',
          dateSearch: '',
          acceptDate: '',
          provinceCode: '',
          cityCode: '',
          factoryId: '',
          ystsn: ''
        },
        // 当前tab
        tab: 0,
        // tab标签页
        activeName: 'unReturn',
        // 工单详情dto
        acceptOrderDto: {
          acceptedTime: '',
          customerId: '',
          provinceCode: '',
          cityCode: '',
          areaCode: '',
          province: '',
          city: '',
          area: '',
          address: '',
          customerType: '',
          customerName: '',
          tel: '',
          ystsn: '',
          status: '',
          brandId: '',
          modelId: '',
          factoryId: '',
          expirationDate: '',
          repairType: 1,
          logisticsNumber: '',
          warrantyDevId: '',
          warrantyDevFlag: 1
        },
        // 用户角色类型
        roleType: getRoleType(),
        // 办事处类型 0:省办事处，1:市办事处
        officeType: getOfficeType(),
        // 省外包商 1
        outSource: getOutsourceType(),

        listQuery: {
          customerName: undefined,
          // acceptedCode: undefined,
          status: undefined,
          dateSearch: undefined
        },
        alreadyList: {
          customerName: undefined,
          // acceptedCode: undefined,
          status: undefined,
          dateSearch: undefined
        },
        ystsn: '',
        // 工单详情显示
        detailFormVisible: false,
        disabledFlag: true,
        tableLoadingFlag: false,
        detailDialogVisible: false,
        detailTableLoadingFlag: false,
        columns: [
          {label: 'ID', name: 'id', width: '80', align: 'center'},
          // {label: '工单编号', name: 'acceptedCode', align: 'center'},
          {label: '受理日期', name: 'acceptedTime', width: '160', align: 'center'},
          {label: '服务类型', name: 'serviceTypeName', width: '80', align: 'center'},
          {label: '故障类型', name: 'faultTypeName', width: '80', align: 'center'},
          {label: '省', name: 'province', width: '80', align: 'center'},
          {label: '客户地市', name: 'city', width: '80', align: 'center'},
          {label: '客户姓名', name: 'customerName', align: 'center'},
          {label: '联系电话', name: 'tel', width: '100', align: 'center'},
          {label: '型号', name: 'modelName', align: 'center'},
          {label: 'YSTSN', name: 'ystsn', align: 'center'},
          {label: '备机型号', name: 'newModelName', align: 'center'},
          {label: '备机YSTSN', name: 'newYstsn', align: 'center'},
          {label: '维修结果', name: 'repairStatus', align: 'center'}
        ],
        column2: [
          {label: 'ID', name: 'id', width: '80', align: 'center'},
          // {label: '工单编号', name: 'acceptedCode', align: 'center'},
          {label: '受理日期', name: 'acceptedTime', width: '160', align: 'center'},
          {label: '返还日期', name: 'backTime', width: '160', align: 'center', formatter: this.formatTime},
          {label: '物流公司', name: 'logisticsCompany', width: '160', align: 'center'},
          {label: '物流单号', name: 'logisticsNumber', width: '160', align: 'center'},
          {label: '服务类型', name: 'serviceTypeName', width: '80', align: 'center'},
          {label: '故障类型', name: 'faultTypeName', width: '80', align: 'center'},
          {label: '省', name: 'province', width: '80', align: 'center'},
          {label: '客户姓名', name: 'customerName', align: 'center'},
          {label: '客户地市', name: 'city', width: '80', align: 'center'},
          {label: '联系电话', name: 'tel', width: '100', align: 'center'},
          {label: '型号', name: 'modelName', align: 'center'},
          {label: 'YSTSN', name: 'ystsn', align: 'center'},
          {label: '备机型号', name: 'newModelName', align: 'center'},
          {label: '备机YSTSN', name: 'newYstsn', align: 'center'},
          {label: '维修结果', name: 'repairStatus', align: 'center'}
        ],
        // 操作栏
        operationColumn: {
          width: '100',
          operations: [
            {name: '维修详情', callback: this.onBtnRepairHistory}
          ]
        },
        returnOrderList: [],
        alreadyReturnList: [],
        pagination: this.getData(this.getReturnList),
        paginationAlready: this.getData(this.alreadyReturn),
        flagList: [],
        // 工厂一览
        factoryOption: [],
        // 所有省份一览选择
        allSelectProvince: [],
        // 城市一览选择
        allSelectCity: []
      }
    },
    methods: {
      formatTime (row, column, cellValue) {
        return parseTime(cellValue, '{y}-{m}-{d}')
      },
      // 获取当前省份下所有城市一览
      getSelectCity () {
        this.searchDto.cityCode = ''
        if (this.searchDto.provinceCode === '') {
          this.allSelectCity = []
        } else {
          let listQuery = {
            province: this.searchDto.provinceCode
          }
          apiGetCity(listQuery).then(response => {
            this.allSelectCity = response.data
          })
        }
      },
      // 获取所有省份一览
      getSelectProvince () {
        apiGetCity().then(response => {
          this.allSelectProvince = response.data
        })
      },
      // 获取工厂一览
      getFactoryList () {
        apiGetFactoryList().then(response => {
          this.factoryOption = response.data
        })
      },
      // 弹出维修一览界面
      onBtnRepairHistory (row) {
        this.detailDialogVisible = true
        this.ystsn = row.ystsn
      },
      // 关闭弹出框
      onBtnCancel () {
        this.detailTableLoadingFlag = false
        this.tableLoadingFlag = false
        this.detailDialogVisible = false
      },
      // tab栏触发
      handleClick () {
        if (this.activeName === 'unReturn') { // 待返还标记0
          this.tab = 0
          this.searchReturn()
        } else if (this.activeName === 'alreadyReturn') { // 已返还标记1
          this.tab = 1
          this.searchReturn()
        }
      },
      getReturnList (listQuery) {
        this.tableLoadingFlag = true
        listQuery = {
          pageNumber: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          customerName: undefined,
          // acceptedCode: undefined,
          status: undefined,
          dateSearch: undefined,
          acceptDate: undefined,
          provinceCode: undefined,
          cityCode: undefined,
          factoryId: undefined
        }
        listQuery.customerName = this.searchDto.customerName
        // listQuery.acceptedCode = this.searchDto.acceptedCode
        listQuery.dateSearch = this.searchDto.dateSearch
        listQuery.acceptDate = this.searchDto.acceptDate
        listQuery.provinceCode = this.searchDto.provinceCode
        listQuery.cityCode = this.searchDto.cityCode
        listQuery.factoryId = this.searchDto.factoryId
        listQuery.ystsn = this.searchDto.ystsn
        listQuery.status = 3
        apiGetReturnList(listQuery).then(response => {
          this.returnOrderList = response.data
          for (let i in this.returnOrderList) {
            let time = this.returnOrderList[i].acceptedTime.split('.')
            this.returnOrderList[i].acceptedTime = time[0]
          }
          this.pagination.totalRecords = response.totalRecords
          this.tableLoadingFlag = false
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      alreadyReturn (alreadyList) {
        this.tableLoadingFlag = true
        alreadyList = {
          pageNumber: this.paginationAlready.currentPage,
          pageSize: this.paginationAlready.pageSize,
          customerName: undefined,
          // acceptedCode: undefined,
          status: undefined,
          dateSearch: undefined,
          acceptDate: undefined
        }
        alreadyList.customerName = this.searchDto.customerName
        // alreadyList.acceptedCode = this.searchDto.acceptedCode
        alreadyList.dateSearch = this.searchDto.dateSearch
        alreadyList.acceptDate = this.searchDto.acceptDate
        alreadyList.ystsn = this.searchDto.ystsn
        alreadyList.status = 1
        apiGetReturnList(alreadyList).then(response => {
          this.alreadyReturnList = response.data
          for (let i in this.alreadyReturnList) {
            let time = this.alreadyReturnList[i].acceptedTime.split('.')
            this.alreadyReturnList[i].acceptedTime = time[0]
          }
          this.paginationAlready.totalRecords = response.totalRecords
          this.tableLoadingFlag = false
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      searchReturn () {
        if (this.tab === 0) {
          this.pagination.currentPage = 1
          this.pagination.pageSize = 10
          this.getReturnList()
        } else if (this.tab === 1) {
          this.paginationAlready.currentPage = 1
          this.paginationAlready.pageSize = 10
          this.alreadyReturn()
        }
      },
      onReturn () {
        if (this.flagList.length === 0) {
          this.$message(
            {
              message: '未选中任何选项',
              type: 'error'
            }
          )
        } else {
          let customerList = this.flagList[0]
          for (let i in customerList) {
            if (i >= 1) {
              if (customerList[i].customerName !== customerList[i - 1].customerName) {
                this.$message(
                  {
                    message: '选中的不是同一个客户',
                    type: 'error'
                  }
                )
                return
              }
            }
          }
          this.$router.push(
            {
              path: '/repairs/point/logistics',
              query: {flagList: this.flagList}
            })
        }
      },
      addList (selection) {
        this.flagList.pop()
        this.flagList.push(selection)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .toolbar-header {
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    background: #eef1f6;
    height: 35px;
    .toolbar-btn {
      margin-left: 10px;
    }
  }
</style>
